<template>
	<a-modal :visible="visible" width="500px" :title="(Object.keys(props.data).length > 0 ? '编辑' : '添加') + '紧急联系人'" centered destroyOnClose @cancel="cancel" :footer="null" :maskClosable="false" :bodyStyle="{padding: 0}">
		<a-form ref="formRef" :model="modelRef" class="flex-container-nomal" @finish="run" :labelCol="{style: {width: '90px'}}">
			<div class="flex1 auto-y">
				<a-form-item label="姓名" name="name" :rules="[{required: true, message: '请输入姓名'}]">
					<a-input v-model:value="modelRef.name" placeholder="请输入姓名" style="width: calc(100% - 91px)" />
				</a-form-item>
				<a-form-item label="电话" name="phone" :rules="rules.phone">
					<a-input v-model:value="modelRef.phone" :maxlength="11" placeholder="请输入电话" />
				</a-form-item>
				<a-form-item label="关系" name="type" :rules="[{required: true, message: '请选择关系'}]">
					<a-select v-model:value="modelRef.type" placeholder="请选择关系" style="width: 200px" :options="relationshipList" />
				</a-form-item>
			</div>
			<div class="a-modal-dialog-footer">
				<a-space :size="12">
					<a-button @click="cancel">取消</a-button>
					<a-button type="primary" html-type="submit" :loading="loading" :disabled="loading">确定</a-button>
				</a-space>
			</div>
		</a-form>
	</a-modal>
</template>
<script setup lang="ts">
	import {reactive, ref, watch} from 'vue'
	import {useRequest} from 'vue-request'
	import {roommateSave, editRoommate, editEmergency} from '@/api/contract'
	import {message} from 'ant-design-vue'
	import type {Rule} from 'ant-design-vue/es/form'
	import {rules} from '@/utils/rules'
	import {relationshipList} from '@/utils'
	import {CERTIFICATION_TYPE_MAP} from 'yuxin-base/src/constant/index'
	import {checkIdCard} from '@/utils/check'
	import {charterEmergencyContact} from '@/api/dictionary'
	import {object} from 'vue-types'

	const modelRef = reactive({
		name: '',
		phone: '',
		type: null
	})

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		id: {
			type: [String, Number],
			default: ''
		},
		data: {
			type: Object,
			default: () => ({})
		},
		isCharter: {
			type: Boolean,
			default: false
		}
	})

	// onMounted(() => {})

	const certificateOptions = Object.keys(CERTIFICATION_TYPE_MAP).map((key: string) => ({
		label: CERTIFICATION_TYPE_MAP[key],
		value: Number(key)
	}))

	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
		resetForm()
	}

	watch(
		() => props.visible,
		(newVal: boolean, oldVal: boolean) => {
			if (Object.keys(props.data).length > 0 && newVal) {
				setTimeout(() => {
					Object.assign(modelRef, {
						name: props.data.emergencyName,
						phone: props.data.emergencyPhone,
						type: props.data.emergencyType
					})
				})
			}
		}
	)

	const sendRequest = () => {
		console.log(modelRef.type)
		const data = {
			emergencyName: modelRef.name,
			emergencyPhone: modelRef.phone,
			emergencyType: modelRef.type,
			id: props.id
		}
		return props.isCharter ? charterEmergencyContact(data) : editEmergency({id: props.id, ...modelRef})
	}

	const {run, loading} = useRequest(sendRequest, {
		manual: true,
		formatResult: (res: any) => {
			if (res.code == 200) {
				message.success('操作成功')
				setTimeout(() => {
					emit('success')
					cancel()
				}, 300)
			}
		}
	})
	// 重置表单
	const formRef = ref<any>()
	const resetForm = () => {
		formRef.value.resetFields()
	}
</script>
<style lang="less"></style>
